<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>达内慕课网</title>
    <style>
        #header{
            width: 100%;
            height: 60px;
            background-color: #0AA1DE;
        }
        #nav{
           width: 1200px;
           height: 60px;
           top: 0;
           position: relative;
       }
       #tu1>img{
           float: left;
           /*行内元素图片和文本有默认的对齐方式所以图片动字会跟着动*/
       }
       ul{
           list-style-type: none;/*去圆点*/
           overflow: hidden;/*解决所有子元素全部浮动导致的显示异常*/
           margin: 0;
       }
       #nav>ul>li{
           float: left;
           margin-right: 30px; /*每一个标签空15px*/
           margin-top: 20px;
       }
       #nav>ul>li>a{
           color: white;
           text-decoration: none;/*去下标*/
       }
 /****************/
      #big_div{
           width: 1200px;
           height: 455px;
           background-color: #292d32;
           overflow: hidden;
       }
       #zuo_div ul{
           list-style-type: none;
           float: left;
           margin-left: 0;
       }
       #zuo_div li{
           width: 200px;
           height: 60px;
           border: 1px solid black;
           margin-right: 50px;
           background-color: #292d32;
       }
       #zuo_div a{
            width: 225px;
            height: 21px;
            display: block;
            color: #999999;
            background-color: #292d32;
            text-decoration: none;/*去下标*/
            margin: 22px auto;
        }
      #top_1>img{
          position: absolute;
          width: 900px;
          height: 300px;
          float: right;
          margin-top: 0;
          margin-right: 250px;
          background-color: orange;
          overflow: hidden;
        }
      /*悬浮状态*/
        #zuo_div a:hover{
            display: block;
            color: #0AA1DE;
            width: 230px;
            height: 63px;
            background-color: #e89aa8;
        }
    </style>

</head>
<body>
<div id="header">
    <div id="tu1">
        <img src="达内慕课网图片.JPG" alt="">
    </div>
    <div id="nav">
        <ul>
        <li><a href="">首页</a></li>
        <li><a href="">免费课</a></li>
        <li><a href="">直播课</a></li>
        <li><a href="">精品课</a></li>
        <li><a href="">线上课(VIP)</a></li>
        <li><a href="">线下班</a></li>
        <li><a href="">大内高手</a></li>
        <li><a href="">高校专区</a></li>
        <li><a href="">我的课程</a></li>
    </ul>
    </div>
</div>

<div id="big_div">
    <div id="zuo_div">
        <ul id="ul1">
        <li><a href="">前端/后端开发&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a href="">大数据/云计算&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a href="">移动开发/游戏&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a href="">物联网/测试&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a href="">营销/产品/运营&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a href="">数字艺术&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a href="">其他职业课程&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
    </ul>
    </div>
    <div id="right_div">
        <div id="top_1">
            <img src="达内慕课网图片.JPG" alt="">
        </div>
    </div>
        
</div>
</body>
</html>




    <!--<div id="right_div">
        <div id="top_1">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.jiligame.com%2Fwp-content%2Fuploads%2F2019%2F04%2F200573850234092ca01c4b9a79a2345b.jpg&refer=http%3A%2F%2Fwww.jiligame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625140556&t=31063b6a5a90f444eb8fd53037263ae1" alt="">
        </div>-->



        <div id="under_1">
            <div id="b_left"></div>
            <div class="b_right">
                <img src="http://cdn.tmooc.cn/bsfile//imgad///fff1186ad2ae4b0790825eae784cb041.jpg" alt="">
            </div>
            <div class="b_right">
                <img src="http://cdn.tmooc.cn/bsfile//imgad///281d749e5acc4c7686ac76bd11589134.png" alt="">
            </div>
            <div class="b_right">
                <img src="http://cdn.tmooc.cn/bsfile//imgad///09a6c091745743779a469b1de82987be.png" alt="">
            </div>
            <div class="b_right">
                <img src="http://cdn.tmooc.cn/bsfile//imgad///acf41aa9919c43628b1d06430f3367a7.png" alt="">
            </div>
        </div>

</div>
</div>



